<template>
    <component :is="FormItem" ref="ObjItem" :Option="Option" v-model="InputValue" :DefaultValue="DefaultValue"
        :Model="ChildModel" :Level="ChildLevel" :Type="ChildType" />
</template>
<script setup>
import { ref, watch, shallowRef, inject } from 'vue';
import _ArrayString from './ArrayString.vue';
import ObjectView from './ObjectView.vue';

const ViewMapping = {
    String: _ArrayString,
    Model: ObjectView,
}

const InputValue = ref();
const emit = defineEmits(['UpdateValue'])
const props = defineProps(['Type', 'Option', 'Level', 'Value', 'index']);
const FormItem = shallowRef();

const GetModel = inject('GetModel');

let DefaultValue = {};
let ChildModel = {};
let ChildLevel = props.Level + 1;
let ChildType = '';

async function InitModel() {
    var _TypeArray = props.Type?.split(':') || [];
    var First = _TypeArray.shift();
    var _type = _TypeArray.join(':');
    switch (First) {
        case 'Model':
            var _ObjectKey = _type.split(':')[1];
            ChildModel = await GetModel(_ObjectKey);
            ChildType = props.Option.Option.ViewType;
            FormItem.value = ViewMapping[First];
            break;
        case 'Array':
            ChildType = props.Option.ViewType;
            FormItem.value = ViewMapping[First];
            break;
        default:
            FormItem.value = ViewMapping[First];
            break;
    }
}

InitModel();

watch(() => props.Value, (val) => {
    InputValue.value = val;
}, { deep: true, immediate: true })


watch(InputValue, (val) => {
    emit('UpdateValue', val, props.index);
})


</script>
<style lang="less" scoped>

</style>